<template>
  <div>
    <div class="all-wrap">
      <div class="all-title">歌手管理</div>
      <div class="top-controllers" style="margin-bottom: 4px;">
        <el-input v-model="searchValue" clearable class="w-50 m-2" placeholder="请输入歌手名" @clear="inputClear"/>
        <el-button type="primary" @click="searchClick">搜索</el-button>
        <el-button type="primary" @click="addSingerFN">新增</el-button>
      </div>
    </div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column type="index" width="50" />
      <el-table-column prop="header" label="头像" width="100">
        <template #default="scope">
          <img :src="scope.row.header" style="width: 100%;">
        </template>
      </el-table-column>
      <el-table-column prop="singerName" label="歌手名字" />
      <el-table-column prop="id" label="歌手id" />
      <el-table-column prop="showNumber" label="推荐页显示顺序" width="200">
        <template #default="scope">
          <el-input-number v-model="scope.row.showNumber" :min="0" :max="99" @change="handleChangeShowNumber(scope.row)" />
        </template>
      </el-table-column>
      <el-table-column prop="description" label="介绍" />
      <el-table-column label="Controllers">
        <template #default="scope">
          <el-button type="primary" size="small" @click="editData(scope.row)">修改</el-button>
          <el-popconfirm width="220" confirm-button-text="OK" cancel-button-text="No, Thanks" :icon="InfoFilled"
            icon-color="#626AEF" title="Are you sure to delete this?" @confirm="confirmEvent(scope.row)">
            <template #reference>
              <el-button>Delete</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination v-model:current-page="currentPage" :page-size="10" layout="total, prev, pager, next" :total="dataTotal"
      @current-change="handleCurrentChange" />
    <el-dialog v-model="dialogSinger" :title="popTitle">
      <el-form :model="form" ref="ruleFormRef" label-width="100" :rules="rules">
        <el-form-item label="用户名" prop="singerName">
          <el-input v-model="form.singerName" autocomplete="off" />
        </el-form-item>
        <el-form-item label="热度" props="hot">
          <el-input v-model="form.hot" type="number" min="0" autocomplete="off" />
        </el-form-item>
        <el-form-item label="推荐权重" props="showNumber">
          <el-input v-model="form.showNumber" type="number" min="0" autocomplete="off" />
        </el-form-item>
        <el-form-item label="简介" props="description">
          <el-input v-model="form.description" autocomplete="off" />
        </el-form-item>
        <el-form-item label="上传图片" >
        <el-upload
          ref="upload"
          class="upload-demo"
          action="/shopApi/uploadSingerHeader"
          :limit="1"
          :on-exceed="handleExceed"
          :on-success="uploadSuccess"
          :before-remove="beforeRemove"
          v-model:file-list="fileList"
          :auto-upload="true"
        >
          <template #trigger>
            <el-button type="primary">select file</el-button>
          </template>
          <template #tip>
            <div class="el-upload__tip text-red">
              限制上传一张，多上传会覆盖上一张
            </div>
            <div v-show="form.header"><img :src="form.header" style="width:100px"></div>
          </template>
        </el-upload>
       </el-form-item>
        
      </el-form>
      <template #footer>
          <span class="dialog-footer">
            <el-button @click="cancelEdit(ruleFormRef)">取消</el-button>
            <el-button type="primary" @click="submitEdit(ruleFormRef)">
              确定
            </el-button>
          </span>
        </template>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import {ref,reactive,onMounted} from 'vue'
import {ElMessage, FormInstance}from 'element-plus'
import { InfoFilled } from '@element-plus/icons-vue'
import {getSingerList,addSinger,editSinger,deleteSinger,updateShowNumber} from '../apis/singer'
import { genFileId } from 'element-plus'
import type { UploadInstance, UploadProps, UploadRawFile } from 'element-plus'
let searchValue=ref("")
let tableData=ref([])
let currentPage=ref(1)
let dataTotal=ref<number>(0)
let dialogSinger=ref<boolean>(false)
let fileList=ref([])
let popTitle=ref("新增数据")
let editId=ref(0)

let form=reactive({
  singerName:"",
  header:"",
  hot:1,
  showNumber:0,
  description:""
})
const rules=reactive({
  singerName:[
    {required:true,trigger:'blur'},
    {min:2,max:8,message:"长度2-8个字"}
  ]
})
const ruleFormRef = ref<FormInstance>()





const upload = ref<UploadInstance>()
const handleExceed: UploadProps['onExceed'] = (files) => {
  fileList.value=[]
  upload.value!.clearFiles()
  const file = files[0] as UploadRawFile
  file.uid = genFileId()
  upload.value!.handleStart(file)
}
const beforeRemove=(parmas)=>{
  form.header=""
}

const uploadSuccess=(res)=>{
  if(res.success!=true)return
  form.header=res.url
  // editDataUrl.value=''
}
const resetForm=()=>{
 let empty={}
 for(let i in form){
   empty[i]=''
 }
 Object.assign(form,empty)
}
const searchClick=()=>{
  getDataList()
}
const addSingerFN=()=>{
  popTitle.value="新增数据"
  dialogSinger.value=true
  resetForm()
}
const editData=async(row)=>{
  popTitle.value="修改数据"
  editId.value=row.id
  
  form=reactive({
    singerName:row.singerName,
    header:row.header,
    hot:row.hot,
    showNumber:row.showNumber,
    description:row.description
  })
  form.header=row.header
  dialogSinger.value=true
}
const handleChangeShowNumber=async(row)=>{
  let res=await updateShowNumber({
    id:row.id,
    showNumber:row.showNumber
  })
  if(res.status==200){
    ElMessage({
      message: '数据修改成功',
      type: 'success',
    })
  }
}
const confirmEvent=async(row)=>{
  let res=await deleteSinger({id:row.id})
}
const handleCurrentChange=()=>{
  getDataList()
}
const cancelEdit=(row)=>{
  dialogSinger.value=false
  resetForm()
}
const submitEdit=async(formEl)=>{
  await formEl.validate(async(valid, fields) => {
   if(valid){
    if(popTitle.value=="新增数据"){
      let res=await addSinger(form)
      if(res.status==200){
        ElMessage({
          message: '新增歌手成功',
          type: 'success',
        })
        getDataList()
        dialogSinger.value=false
        fileList.value=[]
      }
    }else{
      let data={
        ...form,
        id:editId.value,
      }
      let res=await editSinger(data)
      if(res.status==200){
        ElMessage({
          message: '新增歌手成功',
          type: 'success',
        })
        getDataList()
        dialogSinger.value=false
        fileList.value=[]
      }
    }
   }
  })
}
const inputClear=()=>{
  currentPage.value=1
  getDataList()
}
const getDataList=async()=>{
  let res=await getSingerList({page:currentPage.value,singerName:searchValue.value})
  if(res.status==200){
    tableData.value=res.data.list
    dataTotal.value=res.data.total
  }
}
onMounted(async()=>{
  getDataList()
})
</script>
<style lang="less" scoped>
  .top-controllers {
  width: 100%;
  height: 30px;

  .w-50 {
    width: 200px;
    margin-right: 20px;
  }
}
</style>